<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0px;
			padding: 0px;
		}
		.box{
			width:520px;
			height: 150px;
			padding-top: 100px;
			position: relative;
			margin:0px auto;
			background-color: #7F7F7F;
		}
		.title{
			font-size: 30px;
			color: white;	
			position: absolute;
			left: 170px;
			top:10px;

		}
		.box2{
			width:445px;
			height: 95px;
			background-color:#7F7F7F;
			margin: 0px auto;
			margin-left: 47px;


		}

		.xian{
			height: 3px;
			background-color: black;
			width: 423px;
			position: absolute;
			top: 147px;
			left: 47px;
			z-index: 999;

		}
		.dian{
			height: 10px;
			width: 10px;
			border-radius: 100%;
			background-color: #9FFF47;
			position: absolute;
			top:33px;
			right: -12px;
		}
		.dian2{
			height: 10px;
			width: 10px;
			border-radius: 100%;
			background-color: #9FFF47;
			position: absolute;
			top:53px;
			right: -12px;

		}

		.p1{
			width: 95px;
			height: 135px;
			float: left;
			margin-right: 15px;
			text-align: center;
			position: relative;
		}
		.p2{
			margin-right: 0px;
		}
		.word{
			color: #C3C3C3;
			font-size: 18px;


		}
		.time{
			width: 95px;
			height: 95px;
			line-height: 95px;
			text-align: center;
			background-color: #141111;
			color: white;
			font-size: 80px;
			border-radius: 20px;
		}
	</style>
	<script type="text/javascript">
		
		window.onload= function (){
			setInterval(fun,1000);
			function fun(){
			var yuandan=new Date('2016/12/15');
			var today=new Date();
			var yuandanmiao=Math.ceil(yuandan.getTime()/1000);
			var todymiao=Math.ceil(today.getTime()/1000);
			var tim=yuandanmiao-todymiao;

			var day =Math.floor(tim/86400);
			var hour=Math.floor((tim%86400)/3600);
			var fen =Math.floor(((tim%86400)%3600)/60);
			var miao=Math.floor(((tim%86400)%3600)%60);
			day2=document.getElementById('day2');
			hour2=document.getElementById('hour2');
			fen2=document.getElementById('fen2');
			miao2=document.getElementById('miao2');
			day2.innerHTML= day
			hour2.innerHTML=hour
			fen2.innerHTML=fen
			miao2.innerHTML=miao
			}
		}
		
		
	</script>
</head>
<body>
	<div class="box">
		<p class="title">距离出师还有:</p>
		<div class="xian"></div>
		<div class="box2">	
			<div class="p1"><p class="time" id="day2"><div class="dian"></div><div class="dian2"></div></p><p class="word">天</p></div>
			
			<div class="p1"><p class="time" id="hour2"><div class="dian"></div><div class="dian2"></div></p><p class="word">小时</p></div>

			<div class="p1"><p class="time" id="fen2"><div class="dian"></div><div class="dian2"></div></p><p class="word">分</p></div>

			<div class="p1 p2"><p class="time" id="miao2"></p><p class="word">秒</p></div>
		</div>
	</div>	
</body>
</html>